<script xmlns:el-col="http://www.w3.org/1999/html">
export default {
  name: "User",
  data() {
    return {
      //分页
      pageData:{
        page:1,
        size:2,
        userName:null,
        userAccount:null
      },
      total:0,//分页总行数，用于分页计算

      //表格数据
      tableData: [],
      //新增窗口的打开和关闭
      dialogVisible: false,

      //新增内容的数据绑定
      addData:{
        userAccount:null,
        userPassword:null,
        userName:null,
        userState:null,
      },
      //头像回显
      //imageUrl: ''

      options: [{
        value: '选项1',
        label: '区域一'
      }, {
        value: '选项2',
        label: '区域二'
      }, {
        value: '选项3',
        label: '区域三'
      }, {
        value: '选项4',
        label: '区域四'
      }, {
        value: '选项5',
        label: '区域五'
      }],
      value: ''
    }
  },
  methods:{
    //获取用户信息
    getUserList(){
      this.$http({url:"user/selectPage",method:"GET",params:this.pageData}).then(res=>{
        this.tableData = res.data.data.list;
        this.total=res.data.data.total;
      })
    },
    //分页的两个方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //重新加载表格数据
      this.pageData.size=val;
      //重新调用数据加载方法
      this.getUserList()

    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageData.page=val;
      //重新调用数据加载方法
      this.getUserList()
    },
    //新增弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //打开新增窗口
    addShow(){
      this.dialogVisible =true
    },

    //图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },

  mounted() {
    //组件加载触发该方法
    //发送请求获取数据
    this.getUserList();
  }
}
</script>


<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--查询列表-->
    <el-row style="margin-top: 20px;">
      <el-col :span="4">
        <el-input
          placeholder="请输入用户名称"
          prefix-icon="el-icon-search"
          v-model="pageData.userName">
        </el-input>
      </el-col>
      <el-col :span="4" style="margin-left: 20px">
        <el-input v-model="pageData.userAccount" placeholder="请输入账号"></el-input>
      </el-col>
      <el-col :span="4" style="margin-left: 20px">
        <el-select v-model="value" placeholder="请选择区域">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>


        </el-select>
      </el-col>

      <el-col :span="4" style="margin-left: 20px">
        <el-time-select
          v-model="value"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }"
          placeholder="选择时间">
        </el-time-select>
      </el-col>

      <el-col :span="6" style="margin-left: 20px">
        <el-button type="primary" @click="getUserList">查询</el-button>
        <el-button type="success"  @click="addShow">新增</el-button>
      </el-col>
    </el-row>

    <!--查询数据-->
    <el-table
      :data="tableData"
      style="width: 100%;margin-top: 20px" >
      <el-table-column
        prop="userName"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userAccount"
        label="账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userPassword"
        label="密码">
      </el-table-column>
      <el-table-column
        prop="userEmail"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="userImg"
        label="头像">
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageData.page"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pageData.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">

      <el-form ref="form" :model="addData" label-width="80px">
        <el-form-item label="用户头像">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="用户昵称">
          <el-input v-model="addData.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input v-model="addData.userAccount"></el-input>
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input v-model="addData.userPassword"></el-input>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-select v-model="addData.userState" placeholder="请选择状态">
            <el-option label="管理者" value="shanghai"></el-option>
            <el-option label="普通用户" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">新 增</el-button>
  </span>
    </el-dialog>

  </div>


</template>



<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
